<template>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="900px" append-to-body>
        <el-table v-loading="loading" :data="tableData" border script>
            <el-table-column label="平台" prop="title" min-width="100"></el-table-column>
            <el-table-column label="广告账户" prop="advertiser_name" min-width="200"></el-table-column>
            <el-table-column label="广告ID" prop="advertiser_id" min-width="200"></el-table-column>
            <el-table-column label="花费" prop="spend" min-width="100"></el-table-column>
            <el-table-column label="操作" min-width="160" fixed="right">
                <template slot-scope="scope">
                    <el-button type="text" icon="el-icon-search" @click="toAscription(scope.row)">账户详情</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>
</template>

<script>
import { queryAdvertisingRealList } from '@/api/report'

export default {
    name: 'AbnormalDetails',
    props: {
        value: {
            type: Boolean,
            default: false,
            required: true,
        },
        params: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            loading: false,
            save: false,
            tableData: [],
        }
    },
    computed: {
        title() {
            return `异常广告账户明细`
        },
        dialogVisible: {
            get() {
                return this.value
            },
            set(val) {
                this.$emit('input', val)
            },
        },
    },
    mounted() {
        this.getDetail()
    },
    methods: {
        getDetail() {
            this.loading = true
            const params = { 
                customDate: this.params.customDate,
                date: this.params.date
            }
            queryAdvertisingRealList(params)
                .then(res => {
                    this.tableData = res.data
                })
                .finally(() => {
                    this.loading = false
                })
        },
        toAscription(row) {
            this.$router.push({
                path: '/advertisement/advaccount',
                query: {
                    advertiser_id: row.advertiser_id,
                },
            })
        },
    },
}
</script>

<style></style>
